{% extends 'base.html' %}
{% load static %}


{% block main_contain %}

    <section class="doc_faq_area_two sec_pad">
        <div class="container">
            <div class="section_title text-center"><h2 class="h_title wow fadeInUp">
                你好，我是基于ChatGLM的文旅知识问答助手</h2>
                <p class="wow fadeInUp" data-wow-delay="0.2s">
                    我能理解人类语言、结合文旅语料库生成内容，是你游玩长沙的智能助手。
                </p>
            </div>
            <div class="row">

                <div class="col-lg-4 col-md-5" style="overflow: auto;">
                    <div class="fact_navigation_info">
                        <a href="{% url 'chat:create_dialog' %}" class="btn action_btn thm_btn">新建对话</a>
                    </div>
                    <br>
                    <div class="fact_navigation_info" style="height: 704px;">
                        <h4 class="c_head">历史对话记录</h4>
                        <ul class="nav nav-tabs fact_navigation" id="myTab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="online-tab" data-toggle="tab" href="#newchat" role="tab"
                                   aria-controls="newchat"
                                   aria-selected="true">
                                    新对话
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" id="online-tab" data-toggle="tab" href="#online" role="tab"
                                   aria-controls="online"
                                   aria-selected="true">

                                    请推荐长沙的三个最热门的景点？</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="formOne-tab" data-toggle="tab" href="#formOne"
                                   role="tab" aria-controls="formOne" aria-selected="false">

                                    铜官窑古镇景点位于什么地方？
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="pricingOne-tab" data-toggle="tab"
                                   href="#pricingOne" role="tab" aria-controls="pricingOne"
                                   aria-selected="false">
                                    冬瓜山附近有什么推荐的小吃店铺？
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="profileOne-tab" data-toggle="tab"
                                   href="#profileOne" role="tab" aria-controls="profileOne"
                                   aria-selected="false">
                                    介绍一下岳麓山景点的历史？
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-8 col-md-7" style="height: 850px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);">
                    <div class="tab-content pl_70 all-answers" style="height: 700px; overflow: auto;" id="myTabContent">

                        <!-- id是问答记录表的id -->
                        {% for message in messages %}
                            <div class="forum-comment">
                                <div class="forum-post-top">
                                    {% if message.role|title != "User" %}
                                        <a class="author-avatar" href="#">
                                            <img src="{% static 'picture/assistant.png' %}" alt="author avatar">
                                        </a>
                                    {% else %}
                                        <a class="author-avatar" href="#">
                                            <img src="{% static 'picture/user.png' %}" alt="author avatar">
                                        </a>
                                    {% endif %}
                                    <div class="forum-post-author">
                                        <a class="author-name" href="#">{{ message.role|title }}</a>
                                    </div>
                                </div>
                                <div class="comment-content">
                                    <p>
                                        {{ message.content|linebreaksbr }}
                                    </p>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                    <!-- 提问区域 -->
                    <div class="container custom_container">
                        <form action="" class="banner_search_form" method="post">
                            {% csrf_token %}
                            <div class="input-group">
                                <input type="text" style="background-color: #f5f5f5;" class="form-control"
                                       placeholder="在这里输入" value="{{ prompt }}" name="prompt">
                                <button type="submit" class="search_btn"><i class="icon_search"></i></button>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </section>

{% endblock %}